<template>
  <el-dialog
    :title="switchover ? '温馨提示' : '提交入网申请'"
    :visible.sync="dialogData.dialogVisible"
    width="600px"
    v-loading="listLoading"
    @close="closeDialog"
    @open="openDialog"
    :modal="true"
    :close-on-click-modal="false"
  >
      <div class="container">
        <div class="text-content" v-if="switchover">
          <div class="highlight">亲爱的城市分站：您好！</div>
                  <div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;为配合国家相关法规，从2020年12月20日开始，平台支付系统将变更为杉德支付，商家须在杉德支付系统进行开户。否则，商家在平台的部分功能将会受限。</div>
          <div  class="highlight">受限功能包括：</div>
          <div>a. 商家的正常分账收款 </div>
          <div>为保证商家正常分账收款，请尽快进行开户。</div>
          <div  class="highlight">开户步骤：</div>
          <div>1. 提交入网申请</div>
          <div>2. 进行在线签约 </div>
          <div>3. 激活账号并设置密码 </div>
          <!-- <div>商家开户可联系住保保在线客服，或拨打400-698-7066。</div> -->
        </div>
        <div v-else>

            <div v-if="nextNun == 0">
              <el-form ref="form" :model="list" :rules="rules" label-width="150px" class="form prompt-form">
                <el-form-item prop="companyName" label="公司名称：">
                  <el-input v-model.trim="list.companyName"  placeholder="请输入营业执照注册名称" class="input300" />
                </el-form-item>
                <el-form-item prop="certNo" label="统一社会信用代码：">
                  <el-input
                    v-model.trim="list.certNo"
                    placeholder="请输入营业执照号"
                    class="input300"
                    @input="$forceUpdate()"
                    @keyup.native="list.certNo = verifyVal('numLetter', list.certNo)"
                  />
                </el-form-item>
                <el-form-item prop="address" label="商户经营地址：">
                  <el-input v-model.trim="list.address"  placeholder="请输入商户经营地址" class="input300"/>
                </el-form-item>
                <el-form-item prop="contactName" label="联系人姓名：">
                  <el-input v-model.trim="list.contactName"  placeholder="请输入联系人姓名" class="input300"/>
                </el-form-item>
                <el-form-item prop="mobile" label="联系人手机号码：">
                  <el-input
                    v-model.trim="list.mobile"
                    class="input300"
                    maxlength="11"
                    @input="$forceUpdate()"
                    placeholder="请输入联系人手机号码"
                    @keyup.native="list.mobile = verifyVal('num', list.mobile)"
                  />
                </el-form-item>
                <el-form-item prop="email" label="联系人邮箱：">
                  <el-input v-model.trim="list.email"  placeholder="请输入联系人邮箱" class="input300"/>
                </el-form-item>
              </el-form>
            </div>
             <div v-else>
               <el-form ref="form2" :model="list2" :rules="rules" label-width="150px" class="form prompt-form">
                 <p style="text-align: center;margin:-20px 0 30px;"><i class="el-icon-info " size="5" color="#000"></i>以下资料仅用于商家收款使用</p>
                 <el-form-item label="账户类型："  prop="accountType">
                   <el-radio-group v-model="list2.accountType">
                     <el-radio label="03">对私账户</el-radio>
                     <el-radio label="02">对公账户</el-radio>
                   </el-radio-group>
                 </el-form-item>
                 <div v-if="list2.accountType == '03'">
                   <el-form-item prop="accountName" label="姓名：">
                     <el-input v-model.trim="list2.accountName"  placeholder="请输入姓名" class="input300"/>
                   </el-form-item>
                   <el-form-item prop="idCard" label="身份证号码：">
                     <el-input
                       v-model.trim="list2.idCard"
                       placeholder="请输入身份证号码"
                       class="input300"
                       @input="$forceUpdate()"
                     />
                   </el-form-item>
                   <el-form-item prop="bankCardMobile" label="手机号：">
                     <el-input
                       v-model.trim="list2.bankCardMobile"
                       class="input300"
                       maxlength="11"
                       @input="$forceUpdate()"
                       placeholder="请输入银行卡所绑手机号"
                       @keyup.native="list2.bankCardMobile = verifyVal('num', list2.bankCardMobile)"
                     />
                   </el-form-item>
                   <el-form-item prop="account" label="银行卡号：">
                     <el-input
                       v-model.trim="list2.account"
                       placeholder="请输入银行卡号"
                       class="input300"
                       @input="$forceUpdate()"
                       @keyup.native="list2.account = verifyVal('num', list2.account)"
                     />
                   </el-form-item>
                 </div>
                 <div v-if="list2.accountType == '02'">
                   <el-form-item prop="accountBank" label="开户支行：">
                     <el-input v-model.trim="list2.accountBank"  placeholder="请输入开户支行" class="input300"/>
                   </el-form-item>
                   <el-form-item prop="accountName2" label="账户名：">
                     <el-input
                       v-model.trim="list2.accountName2"
                       placeholder="请输入账户名"
                       class="input300"
                       @input="$forceUpdate()"
                     />
                   </el-form-item>
                   <el-form-item prop="account2" label="账户号：">
                     <el-input
                       v-model.trim="list2.account2"
                       placeholder="请输入账户号"
                       class="input300"
                       @input="$forceUpdate()"
                       @keyup.native="list2.account2 = verifyVal('numLetter', list2.account2)"
                     />
                   </el-form-item>
                   <el-form-item prop="accountBankCode" label="联行号：">
                     <el-input
                       v-model.trim="list2.accountBankCode"
                       placeholder="请输入联行号"
                       class="input300"
                       @input="$forceUpdate()"
                       @keyup.native="list2.accountBankCode = verifyVal('numLetter', list2.accountBankCode)"
                     />
                   </el-form-item>
                 </div>
               </el-form>

             </div>





        </div>
      <div  class="submit">
        <el-button type="primary" @click="netApplication" v-if="switchover">入网申请</el-button>
        <span v-else>
          <el-button type="primary"  class="submit-btn" v-if="nextNun != 1" @click="handleNext(1)">下一步</el-button>
          <el-button type="primary"  class="submit-btn" v-if="nextNun == 1" @click="handleNext(0)">上一步</el-button>
          <el-button type="primary" @click="onSubmit('form2')" class="submit-btn" v-if="nextNun == 1">提交</el-button>
        </span>

      </div>
    </div>
  </el-dialog>
</template>
<script>
import * as api from '@/api/home'
import { getId } from '@/utils/auth'
import store from '@/store'
const defaultList = {
  userId: null,
  contactName: null,
  address: null,
  certNo: null,
  mobile: null,
  email: null,
  companyName: null
}
const defaultList2 = {
  accountType: '03',
  accountName: null,
  accountName2: null,
  idCard: null,
  bankCardMobile: null,
  account: null,
  account2: null,
  accountBankCode: null,
  accountBank: null,
}
export default {
  name: 'forget-psd',
  props: {
    dialogData: {
      type: Object,
      default: function() {
        return {
          dialogVisible: false,
          value: '',
          id: ''
        }
      }
    }
  },
  data() {
    return {
      listLoading: false,
      switchover: true,
      list: Object.assign({}, defaultList),
      list2: Object.assign({}, defaultList2),
      nextNun: 0
    }
  },
  methods: {
    handleNext(num){
      if(num == 1){
        let  formName = 'form'
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.nextNun = 1
          }
        })
      } else {
        this.nextNun = 0
      }
    },
    netApplication(){
      this.switchover = !this.switchover
    },
    /* 重置表单 */
    resetForm(formName) {
    },
    /* 关闭 */
    closeDialog() {
      this.dialogData.dialogVisible = false
      this.listLoading = false
      this.list = Object.assign({}, defaultList)
      this.list2 = Object.assign({}, defaultList2)
      this.resetForm('form')
      this.resetForm('form2')
      this.nextNun = 0
      this.switchover = true
    },
    /* 打开 */
    openDialog() {
    },
    /* 提交 */
    onSubmit(formName) {
      let that = this
      this.$refs[formName].validate((valid) => {
        if (valid) {
          that.listLoading = true
          that.list.userId =   getId()
          that.list.accountType =   this.list2.accountType
          if(that.list.accountType == '03'){
            that.list.accountName =   this.list2.accountName
            that.list.idCard =   this.list2.idCard
            that.list.bankCardMobile =   this.list2.bankCardMobile
            that.list.account =   this.list2.account
          }
          if(that.list.accountType == '02'){
            that.list.accountBank =   this.list2.accountBank
            that.list.accountName =   this.list2.accountName2
            that.list.account =   this.list2.account2
            that.list.accountBankCode =   this.list2.accountBankCode
          }

          api
            .addInfo(that.list)
            .then(() => {
              that.listLoading = false
              that.$message({
                message: '申请成功！',
                type: 'success',
                duration: 3000
              })
              store.dispatch('user/getInfo')
              that.closeDialog()

            })
            .catch(() => {
              this.listLoading = false
            })
        }
      })
    }
  }
}
</script>
<style scoped>
  .prompt-form{
    padding-top: 30px;
  }
  .text-content div{
    color: #000;
    font-size: 16px;
    line-height: 30px;
    text-align: justify;
  }
  .text-content .highlight{
    font-weight: 600;
    line-height: 45px;

  }
  .submit{
    text-align: center;
    margin-top:30px;
  }
  /deep/ .el-dialog__body{
    padding: 10px 30px 30px;
  }
  .submit-btn{
    margin: 10px 0;
  }
</style>
